import { Layout } from 'antd';
import { CSSProperties, useEffect, useState } from 'react';
import { udp, RootContainer } from '@cscec/udp-ui';
import { Outlet, useLocation } from '@umijs/max';
import LeftMenu from '@/components/leftMenu';
import TopHeader from '@/components/topHeader';
import React from 'react';

const sliderStyle: CSSProperties = {
  overflow: 'auto',
  height: '100%',
  backgroundColor: 'var(--primary-color)',
};

const logStyle: CSSProperties = {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  padding: '16px',
  lineHeight: '32px',
  cursor: 'pointer',
  transition: 'padding .2s',
};

const titleStyle: CSSProperties = {
  display: 'inline-block',
  height: '32px',
  margin: 0,
  color: '#fff',
  fontWeight: 600,
  fontSize: '18px',
  lineHeight: '32px',
  verticalAlign: 'middle',
  animation: 'fade-in',
  animationDuration: '.2s',
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};

const headStyle: CSSProperties = {
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  height: '48px',
  lineHeight: '48px',
  padding: '0 16px',
  // zIndex: 1001,
  boxShadow: 'rgb(0 21 41 / 8%) 0px 1px 4px',
};

export default () => {
  const preview = udp.getQueryValue('preview');

  if (preview || udp.isRunMaster) {
    return (
      <RootContainer>
        <div style={{ height: '100%' }}>
          <Outlet />
        </div>
      </RootContainer>
    );
  }

  return <InnerLayout />;
};

function InnerLayout() {
  const [state, setState] = useState({
    collapsed: false,
  });

  const toggle = () => {
    setState((prevState) => ({
      ...prevState,
      collapsed: !prevState.collapsed,
    }));
  };

  useEffect(() => {
    let iT: any = null;
    const el = document.querySelector('.ant-layout-sider');
    return udp.addAnimationend(el, (e: { target: Element | null; }) => {
      if (e.target === el) {
        // 屏蔽子元素冒泡事件触发
        iT && clearTimeout(iT);
        iT = setTimeout(() => {
          // 事件节流
          iT = null;
          window.dispatchEvent(new Event('resize')); // 触发resize事件，确保第三方插件能够及时更新视图
        }, 60);
      }
    });
  }, []);

  const { pathname } = useLocation();

  return (
    <RootContainer>
      <Layout style={{ height: '100vh', flexDirection: 'row' }}>
        <Layout.Sider
          breakpoint="xs"
          style={sliderStyle}
          trigger={null}
          collapsible
          collapsed={state.collapsed}
        >
          <div style={logStyle}>
            <h1 style={titleStyle}>udp开发平台</h1>
          </div>
          <LeftMenu pathname={pathname} />
        </Layout.Sider>
        <Layout className="flex-column" style={{ backgroundColor: 'transparent' }}>
          <Layout.Header style={headStyle}>
            <TopHeader toggle={toggle} collapsed={state.collapsed} pathname={pathname} />
          </Layout.Header>
          <Layout.Content style={{ flex: 1, overflow: 'hidden auto' }}>
            <Outlet />
          </Layout.Content>
        </Layout>
      </Layout>
    </RootContainer>
  );
}
